<template>
  <view
    class="cell"
    :class="{ selected, 'cell-disabled': disabled }"
    @click="click"
    @touchstart="touchstart"
    @touchend="touchend"
    :style="{ borderRadius: `${radius}rpx` }"
  >
    <view class="left-icon">
      <slot name="left-icon"></slot>
    </view>
    <view class="left-wrap">
      <view class="title">{{ title }}</view>
    </view>
    <view class="right-wrap">
      <view class="value" v-if="value">{{ value }}</view>
      <view class="arrow" v-if="link">
        <uni-icons type="arrowright" size="15" color="#969799"/>
      </view>

      <slot name="right-wrap"></slot>
    </view>
    <view class="line" v-show="line"></view>
  </view>
</template>

<script>
export default {
  name: "Cell",
  props: {
    // 左侧文字
    title: String,
    // 右侧文字
    value: String,
    // 导航模式
    link: Boolean,
    // 是否显示线条
    line: Boolean,
    // 圆角
    radius: {
      type: Number,
      default: 0,
    },
    // 跳转到应用内的某个页面
    navigateTo: {
      type: String,
      default: ''
    },
    // 关闭当前页面，跳转到应用内的某个页面
    redirectTo: {
      type: String,
      default: ''
    },
    // 关闭所有页面，打开到应用内的某个页面
    reLaunch: {
      type: String,
      default: ''
    },
    // 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
    switchTab: {
      type: String,
      default: ''
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selected: false,
    };
  },
  methods: {
    touchstart() {
      if(this.link && !this.disabled) {
        this.selected = true;
      }
      this.$emit("touchstart");
    },
    click() {
      if(this.disabled) {
        return
      }
      if(this.link) {
        if(this.navigateTo) {
          uni.navigateTo({ url: this.navigateTo })
        }
        if(this.redirectTo) {
          uni.redirectTo({ url: this.redirectTo })
        }
        if(this.reLaunch) {
          uni.reLaunch({ url: this.reLaunch })
        }
        if(this.switchTab) {
          uni.switchTab({ url: this.switchTab })
        }
      }
      this.$emit("click");
    },
    touchend() {
      if(this.link) {
        this.selected = false;
      }
      this.$emit("touchend");
    },
  },
};
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
